<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-12-02 13:13:25
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2024-01-04 13:28:33
 * @FilePath: \backstage - 副本\src\views\aa.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="department" id="department">
    <!-- 右侧 -->
    <div class="department_right">
      <div class="app-container-btn">
        <el-button @click="goBack">返回</el-button>
      </div>
      <!-- 表格 -->
      <div
        class="text_table multistageHeader TensionRealTimeFirstLevel"
        style="height: 100%"
      >
        <div
          class="dialogBodyBox TensionRealTimesecondLevelBox"
          style="position: relative; height: 61%"
        >
          <tableData
            :page="materialGetList.page"
            :pageSize="materialGetList.pageSize"
            height="100%"
            :config="material_config"
            :dataList="materialData"
            statusType="3"
            :level="level"
            :earlyWarning="earlyWarning"
            :currentRow="false"
            :stripe="false"
          />
          <PaginationS
            :info="queryCriteriaDatas_M"
            :total="queryCriteriaDatas_M.total"
            :pageNum.sync="materialGetList.page"
            :limit.sync="materialGetList.pageSize"
            @pagination="processDetailsFun(materialGetList)"
          />
        </div>
        <!-- <hr /> -->
        <div class="dialogBodyBox" style="height: 39%">
          <div class="tab">
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>

          <div class="charts" v-if="typeData[0].show">
            <!-- 张拉力-->
            <tensioningCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="tensioningData"
              @clickLegend="clickLegend"
            >
            </tensioningCharts>
          </div>

          <div class="charts" v-if="typeData[1].show">
            <!-- 油压 -->
            <pressureCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="pressureData"
              @clickLegend="clickLegend"
            >
            </pressureCharts>
          </div>
          <div class="charts" v-if="typeData[2].show">
            <!-- 伸长量 -->
            <elongationCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="elongationData"
              @clickLegend="clickLegend"
            >
            </elongationCharts>
          </div>
          <div class="charts" v-if="typeData[3].show">
            <!-- 顶行程-->
            <tripCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="tripData"
              @clickLegend="clickLegend"
            >
            </tripCharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
// import vDatePicker from "@/components/public/v-DatePicker";

import tree from "@/components/TensionAndGrout/tree";
import TableData from "@/components/public/el-tables"; //主页面列表
import PaginationS from "@/components/TensionAndGrout/TensionManage/TensionRealTime/el-pagination"; //弹框分页

import pressureCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/pressureCharts"; //油压
import tensioningCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/tensioningCharts"; //张拉力
import elongationCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/elongationCharts"; //伸长量
import tripCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/tripCharts"; //伸长量

import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getTensioningProcessDetailLists, //过程数据--详情
} from "@/api/request.js";
import { statusType2 } from "@/utils/config"; //配置项
export default {
  name: "TensionExceedDatasecondLevel",
  data() {
    return {
      name: "TensionExceedDatasecondLevel", //按钮配置页面代号
      editLoading: false,
      userInfo: {}, //登录用户
      materialRow: null, //选择过程数据当前行数据
      materialGetList: {
        namberId: "", // 孔号id
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      }, //调取过程数据详情接口传参
      materialData: [], //列表
      queryCriteriaDatas_M: {}, //过程数据-详情-分页
      material_config: formJs.material_config,
      earlyWarning: [], //预警标准
      typeData: [
        { text: "张拉力", show: true },
        { text: "油压", show: false },
        { text: "伸长量", show: false },
        { text: "顶行程", show: false },
      ],
      tensioningData: [], //张拉力--图表数据
      pressureData: [], //油压--图表数据
      elongationData: [], //伸长量--图表数据
      tripData: [], //顶行程--图表数据
      chartsLoading: false,
      level: [],

      // 详情
      value2: [],
      xlsxName: null,
    };
  },
  components: {
    TableData, //主页面列表
    PaginationS,
    pressureCharts, //油石比图表
    tensioningCharts, //温度曲线
    elongationCharts, //伸长量
    tripCharts, //顶行程
  },
  mounted() {
    this.getDate();
    this.processDetailsFun();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    getDate() {
      if (
        JSON.parse(sessionStorage.getItem("GxEmbedded_TensionManage_getLists"))
      ) {
        var getList = JSON.parse(
          sessionStorage.getItem("GxEmbedded_TensionManage_getLists")
        );

        this.value2 = [getList.startDates, getList.endDates];
        this.xlsxName =
          getList.startDates + "至" + getList.endDates + "张拉超标数据监控";
      } else {
        this.value2 = [
          this.common.getDay(-90) + " " + "00:00:00",
          this.common.getDay(0) + " " + "23:59:59",
        ];
        this.xlsxName =
          this.common.getDay(-90) +
          "至" +
          this.common.getDay(0) +
          " " +
          "23:59:59" +
          "张拉超标数据监控";
      }
    },
    // 过程数据详情
    processDetailsFun(data) {
      this.materialData = [];
      var materialGetList = {
        fCompanyid: this.$route.query.fCompanyid,
        namberId: this.$route.query.data, // 孔号id
        page: this.materialGetList.page, // 当前页码
        pageSize: this.materialGetList.pageSize, // 每页显示条数
      };

      getTensioningProcessDetailLists(materialGetList)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;

            that.materialData = res.data.pageInfo.list;
            that.queryCriteriaDatas_M = res.data.pageInfo; //分页信息

            that.tensioningData = [
              res.data.line.recorddatesList,
              res.data.line.force1List,
              res.data.line.force2List,
            ]; //张拉力--图表数据
            that.pressureData = [
              res.data.line.recorddatesList,
              res.data.line.pressure1List,
              res.data.line.pressure2List,
            ]; //油压--图表数据
            that.elongationData = [
              res.data.line.recorddatesList,
              res.data.line.elongation1List,
              res.data.line.elongation2List,
            ]; //伸长量--图表数据
            that.tripData = [
              res.data.line.recorddatesList,
              res.data.line.topstroke1List,
              res.data.line.topstroke2List,
            ]; //顶行程--图表数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
      // } else {
      //     return this.$message.error("请先选择需要查看的数据");
      // }
    },

    // btnRole(name) {
    //   // 按钮权限
    //   var btnList = [];
    //   var ModuleList = JSON.parse(
    //     sessionStorage.getItem("GxEmbedded_ModuleList")
    //   );
    //   if (ModuleList.length > 0) {
    //     ModuleList.map((item) => {
    //       if (item.fEncode == name) {
    //         btnList = item.modulebuttonList;
    //       }
    //     });
    //     var btnStr = [];
    //     btnList.map((item) => {
    //       btnStr.push(item.fEncode);
    //     });
    //     // this.yj_view = btnStr.includes("yj_view");
    //   } else {
    //     // this.yj_view = true;
    //   }
    // },

    // 点击图表切换
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
        } else {
          this.typeData[i].show = false;
        }
      }
      this.typeDataNum = index;
    },
    // 图表---点击记录上次停留位置
    clickLegend(e) {
      this.checkType = e;
      window.sessionStorage.setItem(
        "GxEmbedded_dayStatistics_checkData",
        JSON.stringify(e)
      );
    },
    clickLegend1(e) {
      this.checkType = e;
      window.sessionStorage.setItem(
        "GxEmbedded_dayStatistics_checkType1",
        JSON.stringify(e)
      );
    },
  },
};
</script>
    
<style scoped lang='less'>
.TensionRealTimesecondLevelBox {
  display: flex;
  flex-direction: column;
}

.dialogBodyBox {
  width: 100%;

  .tab {
    display: flex;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 2px solid #e4e7ed;
    padding: 0 0.16rem;

    .btn {
      margin-top: 4px;
      // margin-right: 16px;
      width: 80px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}

.common .block {
  bottom: 5px !important;
}
</style>